import React, { useEffect } from 'react';
import { Modal, Form, Select, DatePicker, Tooltip } from 'antd';
import { typeParam_data, alarm_levels, eventType_Data, fireScene_data } from '../constants/index'
import moment from 'moment';

const { Option } = Select;
function FireAddForm(props) {
    const { visible, location } = props;
    const [form] = Form.useForm();
    const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 12 },
    };

    useEffect(() => {
        if (location?.location) form.setFieldValue('location', location)
    }, [location])

    const disabledDate = (current) => {
        return current && current > moment();
    };

    const eventType = Form.useWatch('type', form);
    const renderInfowindow = () => {
        return <div className='report_container' style={{ height: 510, paddingTop: 135 }}>
            <div className='gis_exit' style={{ top: 54 }} onClick={() => { props.onCancel() }} />
            <Form
                form={form}
                {...layout}
                name="control-hooks"
                style={{ maxWidth: 600 }}
                onFinish={_ => {
                    form.validateFields()
                        .then((values) => {
                            form?.resetFields()
                            props.onFinish(values)
                        })
                        .catch((errorInfo) => {
                            console.log(errorInfo)
                        });
                }}
            >
                <Form.Item name="createTime" label="时间" rules={[{ required: true, message: '请选择时间!' }]} >
                    <DatePicker disabledDate={disabledDate} showTime placeholder="请选择事件时间" />
                </Form.Item>
                <Form.Item onFocus={() => {
                    props.locationClick()
                }}
                    rules={[{ required: true, message: '请选择地点!' }]}
                    name="location" label="地点" >
                    <div
                        onClick={() => { props.locationClick() }}
                        style={{ color: 'rgba(89, 153, 200, 1)', paddingLeft: 12 }}>{location?.location ?
                            <Tooltip placement="top" title={location?.location}>
                                <span style={{ color: '#FFF' }}>{location?.location?.length > 10 ? location?.location?.substring(0, 10) + '...' : location?.location}</span>
                            </Tooltip>
                            : '请选择事件地点'}</div>
                </Form.Item>
                <Form.Item name="type" label="警情类型" rules={[{ required: true, message: '请选择警情类型!' }]}>
                    <Select
                        onChange={(s) => {
                            form.setFieldValue('typeParam', null)
                            form.setFieldValue('scene', null)
                        }}
                        placeholder="请选择警情类型">
                        {eventType_Data.map(s => <Option value={s}>{s}</Option>)}
                    </Select>
                </Form.Item>
                <Form.Item name="level" label="危险等级" rules={[{ required: true, message: '请选择危险等级!' }]} >
                    <Select placeholder="请选择事件危险等级" >
                        {alarm_levels.map(s => <Option value={s}>{s}</Option>)}
                    </Select>
                </Form.Item>

                {typeParam_data[eventType] && <Form.Item name="typeParam" label={typeParam_data[eventType]?.name}
                    rules={[{ required: true, message: '请选择' + typeParam_data[eventType]?.name + '!' }]}>
                    <Select placeholder={'请选择' + typeParam_data[eventType]?.name}>
                        {typeParam_data[eventType]?.options?.map(s => {
                            return <Option value={s}>{s}</Option>
                        })}
                    </Select>
                </Form.Item>}

                {eventType == '火灾扑救' && <Form.Item name="scene" label="着火场所" rules={[{ required: true, message: '请选择着火场所!' }]}>
                    <Select placeholder="请选择场所">
                        {fireScene_data?.map(s => <Option value={s}>{s}</Option>)}
                    </Select>
                </Form.Item>}

                <div className='flex-row flex-content-around' style={{ position: 'absolute', bottom: ' 42px', width: '100%', paddingLeft: 35, paddingRight: 35 }}>
                    <div className='cancel_button' onClick={() => { props.onCancel() }}>取消</div>
                    <div onClick={() => { form?.submit() }} className='report_button'>上报</div>
                </div>
            </Form >
        </div >
    }

    return (
        <>
            {/* 新增告警 */}
            <Modal
                maskClosable={false}
                wrapClassName="custom-modal"
                visible={visible}
                closable={false}
                width="360px"
                centered
                footer={null}
                bodyStyle={{}}
                destroyOnClose
            >
                {renderInfowindow()}
            </Modal>
        </>
    );
}

export default FireAddForm;
